<template>
  <div>
    <ul>
      <li class="yingyuan" v-for="item in cinemaList.cinemas" :key="item.id">
       <div class="yingyuan-1">{{item.nm}} <span class="jiage">{{item.price}}</span><span class="yuanqi">元起</span></div>
        <div class="yingyuan-2">{{item.addr}}</div>
        <div class="yingyuan-3">
          <span v-for="(i,index) in item.labels" :key="index"
          :style="[{color:i.color},{borderColor:i.color}]">{{i.name}}</span>
         </div>
         <div class="yingyuan-4">{{item.promotion.cardPromotionTag}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
    name:"Cinemas",
    props:["cinemaList"],
    
}
</script>

<style lang="less" scoped>
  .yingyuan{
    height: 100px;
    border-bottom: 1px solid #eee;
    margin-left: 10px;
    div{
      margin-bottom: 5px;
    }
    .yingyuan-1{
      font-size: 16px;
      color: #000;
      margin-top: 5px;
      .jiage{
        font-size: 18px;
        color: #f03d37;
      }
      .yuanqi{
        font-size: 12px;
        color: #f03d37;
      }
    }
    .yingyuan-2{
      font-size: 13px;
      color: #666;
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
    }
    .yingyuan-4{
      font-size: 12px;
      color: #999;
    }
  }
  .yingyuan .yingyuan-3 span{
    display: inline-block;
    padding: 0px 2px;
    border: 1px solid #ccc;
    margin-left: 3px;
    margin-right: 3px;
    border-radius: 2px;
  }
</style>